import { Layout } from "antd";
import { useState, useEffect } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import { items } from "./config";
import styles from "./index.module.less";
import CommonHeader from "@/components/Header";
import CommonFooter from "@/components/Footer";
import logoSvg from "@/assets/svg/logo.svg";
import logoPng from "@/assets/image/logo.png";
import useAppStore from "@/store/appStore";
const { Sider, Content, Header, Footer } = Layout;
const Dashboard = () => {
  const appStore = useAppStore();
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const navClick = ({ key }: any) => {
    navigate(key);
  };
  // 组件中监听状态并导航
  useEffect(() => {
    useAppStore.subscribe((state) => {
      if (!state.user.logined) {
        navigate("/login");
      }
    });
  }, [appStore, navigate]);
  return (
    <Layout className={styles.layout}>
      <Sider
        className="sider"
        theme="light"
        collapsedWidth={50}
        width={220}
        collapsible
        trigger={null}
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="logo">
          <img src={collapsed ? logoPng : logoSvg} title="logo" />
        </div>
        <Menu
          theme="light"
          items={items}
          inlineCollapsed={collapsed}
          mode="inline"
          onClick={navClick}
        />
      </Sider>
      <Layout>
        <Header className="header">
          <CommonHeader collapsed={collapsed} setCollapsed={setCollapsed} />
        </Header>
        <Content className="content">
          <Outlet />
        </Content>
        <Footer className="footer">
          <CommonFooter />
        </Footer>
      </Layout>
    </Layout>
  );
};
export default Dashboard;
